<script setup>
import {showConfirmDialog} from 'vant';
import 'vant/es/dialog/style'
import {ref, onBeforeMount} from "vue";
import {codeBtnLoading, codeBtnDisable, codeBtnText, getCode} from '@/views/login/GetMailCode.js'
import {useRouter} from "vue-router";
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";
import {getUserAllInfo, updatePwdAPI} from "@/api/user.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import {logoutAPI} from "@/api/logout.js";
import {LOGIN_ROUTE} from "@/router/routes/login/login.js";

const router = useRouter()

const env = import.meta.env
const CODE_LEN = env.VITE_CODE_LEN
const PWD_MAX_LEN = env.VITE_PWD_MAX_LEN
const PWD_MIN_LEN = env.VITE_PWD_MIN_LEN

const code = ref('')
const newPwd = ref('')
const confirmPwd = ref('')
const mail = ref('')
onBeforeMount(async () => {
  const res = await getUserAllInfo()
  mail.value = res.mail
})

const goBack = () => {
  showConfirmDialog({
    message: '是否确认放弃修改密码'
  }).then(() => {
    // on confirm
    router.back()
  }).catch(() => {
    // on cancel
  });
}

const updatePwd = () => {
  if (newPwd.value.length < PWD_MIN_LEN) {
    elErrorMessageTip(`密码长度不应小于 ${PWD_MIN_LEN}`)
    return
  }
  if (newPwd.value !== confirmPwd.value) {
    elErrorMessageTip(`两次密码不一致`)
    return
  }
  if (code.value.length < CODE_LEN) {
    elErrorMessageTip(`请完成验证码的输入`)
    return
  }
  showConfirmDialog({
    message: '是否确认修改密码'
  }).then(async () => {
    // on confirm
    let res = await updatePwdAPI(code.value, newPwd.value)
    if (res) {
      const res = await logoutAPI()
      if (res) {
        useAccountStore().clear()
        router.replace({name: LOGIN_ROUTE})
      }
    }
  }).catch(() => {
    // on cancel
  });
}
</script>

<template>
  <div class="update-pwd">
    <van-nav-bar :title="'修改密码'" left-text="返回" left-arrow fixed @click-left="goBack" placeholder/>
    <van-field
        v-model="newPwd"
        label="新密码"
        placeholder="请输入新密码"
        :maxlength="PWD_MAX_LEN"
        show-word-limit
        type="password"
        clearable
    />
    <van-field
        v-model="confirmPwd"
        label="确认密码"
        placeholder="请确认密码"
        :maxlength="PWD_MAX_LEN"
        show-word-limit
        type="password"
        clearable
    />
    <van-field
        v-model="code"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
        :maxlength="CODE_LEN"
    >
      <template #button>
        <van-button
            size="small"
            type="primary"
            :loading="codeBtnLoading"
            :disabled="codeBtnDisable"
            @click="getCode(mail, '/user/mail/code/pwd', useAccountStore().account)"
        >{{ codeBtnText }}
        </van-button>
      </template>
    </van-field>
    <div class="mt-2 p-2">
      <van-button block
                  round
                  @click="updatePwd"
                  color="linear-gradient(to right, #e2ecf7, #4f66ff, #e2ecf7)">
        确认修改密码
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>